<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="page-view-size" content="1280*720">
  <link rel="stylesheet" href="styles/base.css">
  <title>国宝部落-全部商品</title>
  <style>
    body {
      position: absolute;
      margin: 0;
      padding: 0;
      width: 1280px;
      height: 720px;
      background: url(images/index-bg.jpg);
      background-color: transparent;
    }

    #title {
      position: absolute;
      font-size: 30px;
      color: #fff;
      left: 50px;
      top: 30px;
    }

    #page {
      position: absolute;
      font-size: 18px;
      color: #fff;
      right: 55px;
      top: 40px;
    }

    #page .color {
      color: #feb802;
    }

    #main-0 {
      position: absolute;
      top: 100px;
      left: 50px;
    }

    #main-0 .item {
      position: absolute;
      background: url(images/loading-placeholder.png) repeat;
      width: 220px;
      height: 260px;
    }

    #main-0-0,
    #main-0-1,
    #main-0-2,
    #main-0-3,
    #main-0-4 {
      top: 0;
    }

    #main-0-5,
    #main-0-6,
    #main-0-7,
    #main-0-8,
    #main-0-9 {
      top: 280px;
    }

    #main-0-0,
    #main-0-5 {
      left: 0;
    }

    #main-0-1,
    #main-0-6 {
      left: 240px;
    }

    #main-0-2,
    #main-0-7 {
      left: 480px;
    }

    #main-0-3,
    #main-0-8 {
      left: 720px;
    }

    #main-0-4,
    #main-0-9 {
      left: 960px;

    }

    .goods-container {
      background: #fff;
      height: 260px;
    }

    .goods-container .goods-img {
      width: 220px;
      height: 180px;
    }

    .goods-container .goods-img img {
      width: 100%;
      height: 100%;
    }

    .goods-container .item-view {
      height: 30px;
      position: relative;
      overflow: hidden;
      white-space: nowrap;
    }

    .goods-container .item-text {
      position: absolute;
    }

    .goods-container .goods-info {
      line-height: 30px;
      font-size: 20px;
      padding: 10px 10px;
      color: #000;
    }

    .goods-container .number {
      height: 30px;
    }

    .goods-container .color {
      color: #ff6600;
    }

    .goods-container .color-gray {
      color: #4f4f4f
    }
  </style>
</head>

<body onload="init()" onunload="exit()">
  <div id="title">全部商品</div>
  <div id="page">第<span class="color">1</span>页 / 共<span class="color">3</span>页</div>
  <div id="main-0">
    <div id="main-0-0" class="item item-focus">
      <div class="goods-container">
        <div class="goods-img">
          <img src="images/template/page3-0.png" alt="">
        </div>
        <div class="goods-info">
          <div class="item-view">
            <div class="item-text">熊猫创意文创礼品熊猫创意文创礼品</div>
          </div>
          <div class="number"><span class="color-gray">兑换：</span><span class="color">85</span><span
              class="color">TV币</span></div>
        </div>
      </div>
    </div>
    <div id="main-0-1" class="item item-focus">
      <div class="goods-container">
        <div class="goods-img">
          <img src="images/template/page3-0.png" alt="">
        </div>
        <div class="goods-info">
          <div class="item-view">
            <div class="item-text">熊猫创意文创礼品熊猫创意文创礼品</div>
          </div>
          <div class="number"><span class="color-gray">兑换：</span><span class="color">85</span><span
              class="color">TV币</span></div>
        </div>
      </div>
    </div>
    <div id="main-0-2" class="item item-focus">
      <div class="goods-container">
        <div class="goods-img">
          <img src="images/template/page3-0.png" alt="">
        </div>
        <div class="goods-info">
          <div class="item-view">
            <div class="item-text">熊猫创意文创礼品熊猫创意文创礼品</div>
          </div>
          <div class="number"><span class="color-gray">兑换：</span><span class="color">85</span><span
              class="color">TV币</span></div>
        </div>
      </div>
    </div>
    <div id="main-0-3" class="item item-focus">
      <div class="goods-container">
        <div class="goods-img">
          <img src="images/template/page3-0.png" alt="">
        </div>
        <div class="goods-info">
          <div class="item-view">
            <div class="item-text">熊猫创意文创礼品熊猫创意文创礼品</div>
          </div>
          <div class="number"><span class="color-gray">兑换：</span><span class="color">85</span><span
              class="color">TV币</span></div>
        </div>
      </div>
    </div>
    <div id="main-0-4" class="item item-focus">
      <div class="goods-container">
        <div class="goods-img">
          <img src="images/template/page3-0.png" alt="">
        </div>
        <div class="goods-info">
          <div class="item-view">
            <div class="item-text">熊猫创意文创礼品熊猫创意文创礼品</div>
          </div>
          <div class="number"><span class="color-gray">兑换：</span><span class="color">85</span><span
              class="color">TV币</span></div>
        </div>
      </div>
    </div>
    <div id="main-0-5" class="item item-focus">
      <div class="goods-container">
        <div class="goods-img">
          <img src="images/template/page3-0.png" alt="">
        </div>
        <div class="goods-info">
          <div class="item-view">
            <div class="item-text">熊猫创意文创礼品熊猫创意文创礼品</div>
          </div>
          <div class="number"><span class="color-gray">兑换：</span><span class="color">85</span><span
              class="color">TV币</span></div>
        </div>
      </div>
    </div>
    <div id="main-0-6" class="item item-focus">
      <div class="goods-container">
        <div class="goods-img">
          <img src="images/template/page3-0.png" alt="">
        </div>
        <div class="goods-info">
          <div class="item-view">
            <div class="item-text">熊猫创意文创礼品熊猫创意文创礼品</div>
          </div>
          <div class="number"><span class="color-gray">兑换：</span><span class="color">85</span><span
              class="color">TV币</span></div>
        </div>
      </div>
    </div>
    <div id="main-0-7" class="item item-focus">
      <div class="goods-container">
        <div class="goods-img">
          <img src="images/template/page3-0.png" alt="">
        </div>
        <div class="goods-info">
          <div class="item-view">
            <div class="item-text">熊猫创意文创礼品熊猫创意文创礼品</div>
          </div>
          <div class="number"><span class="color-gray">兑换：</span><span class="color">85</span><span
              class="color">TV币</span></div>
        </div>
      </div>
    </div>
    <div id="main-0-8" class="item item-focus">
      <div class="goods-container">
        <div class="goods-img">
          <img src="images/template/page3-0.png" alt="">
        </div>
        <div class="goods-info">
          <div class="item-view">
            <div class="item-text">熊猫创意文创礼品熊猫创意文创礼品</div>
          </div>
          <div class="number"><span class="color-gray">兑换：</span><span class="color">85</span><span
              class="color">TV币</span></div>
        </div>
      </div>
    </div>
    <div id="main-0-9" class="item item-focus">
      <div class="goods-container">
        <div class="goods-img">
          <img src="images/template/page3-0.png" alt="">
        </div>
        <div class="goods-info">
          <div class="item-view">
            <div class="item-text">熊猫创意文创礼品熊猫创意文创礼品</div>
          </div>
          <div class="number"><span class="color-gray">兑换：</span><span class="color">85</span><span
              class="color">TV币</span></div>
        </div>
      </div>
    </div>
  </div>
</body>
<script src="js/jquery.js"></script>
<script src="config/index.js?v=1"></script>
<script src="api/index.js?v=1"></script>
<script src="js/KeyEvent.js?v=12"></script>
<script src="js/event.js?v=12"></script>
<script src="js/utli.js?v=12"></script>
<script src="js/base.js"></script>

<script>
  var area = [{
    id: 'main-0-',
    index: 0
  }];
  var diff = 5;
  var totalPage = -1;

  // 页面初始化
  function init() {
    getPreFocus();
    onFocus();
  }

  // 获取url参数
  function getPreFocus() {
    var url = window.location.href;
    focusArea = parseInt(GY.getURLParameter("AREA", url) != "" ? GY.getURLParameter(
      "AREA", url) : 0);
    area[focusArea].index = parseInt(GY.getURLParameter("INDEX", url) != "" ? GY.getURLParameter(
      "INDEX", url) : 0);
  }

  // 渲染操作
  function renden() {

  }

  // 上键操作
  function keyUp() {
    var index = area[focusArea].index;
    switch (focusArea) {
      case 0:
        if (index >= diff) {
          freeFocus();
          area[focusArea].index -= diff;
          onFocus()
        } else {
          if (page > 1) {
            page--;
            renden();
          }
        }
        break;
    }
  }

  // 下键操作
  function keyDown() {
    var index = area[focusArea].index;
    switch (focusArea) {
      case 0:
        if (index <= diff) {
          index += diff;
          if ($('#' + area[focusArea].id + index).length > 0) {
            freeFocus();
            area[focusArea].index += diff;
            onFocus()
          }
        } else {
          if (page < totalPage) {
            page++;
            renden();
          }
        }
        break;
    }
  }

  // 左键操作
  function keyLeft() {
    var index = area[focusArea].index;
    switch (focusArea) {
      case 0:
        if (index % diff != 0) {
          if ($('#' + area[focusArea].id + index).length > 0) {
            freeFocus();
            area[focusArea].index--;
            onFocus()
          }
        }
        break;
    }
  }

  // 右键操作
  function keyRight() {
    var index = area[focusArea].index;
    switch (focusArea) {
      case 0:
        index++;
        if (index % diff != 0) {
          if ($('#' + area[focusArea].id + index).length > 0) {
            freeFocus();
            area[focusArea].index++;
            onFocus()
          }
        }
        break;
    }
  }

  // 回车键操作
  function keyEnter() {
    var index = area[focusArea].index;
  }

  // 返回键操作
  function keyBack() {
    isNeed = 0;
    GY.goback();
  }

  // 页面退出
  function exit() {

  }

  // 落焦
  function onFocus() {
    var eFocus = $('#' + area[focusArea].id + area[focusArea].index);
    eFocus.addClass('focus');
    starMarquee(eFocus);
  }

  // 失焦 
  function freeFocus() {
    var eFocus = $('#' + area[focusArea].id + area[focusArea].index);
    eFocus.removeClass('focus');
    stopMarquee(eFocus);
  }
</script>

</html>